<template>
	<view class="tarbar-view">
		<view class="tarbar-list" :style="{
                background: tabBar.backgroundColor,
                color: tabBar.color,
                'border-top': tabBar.position == 'bottom' ? '0rpx solid ' + tabBar.borderStyle : 0,
                'border-bottom': tabBar.position == 'top' ? '0rpx solid ' + tabBar.borderStyle : 0
            }">
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" v-for="(item, index) in tabBar.list" :key="index"
					@click.top="setSelected(item,index)" :style="{'background-color':selected==index?'':''}">
					<!-- <view class="lineto" v-if="index!==0"></view> -->
					<view class="new-bar-message">
						<view class="tarbar-list-li-icon">
							<image :src="selected === index ? item.selectedIconPath : item.iconPath" mode="heightFix" />
						</view>
						<view class="tarbar-list-li-name"
							:style="{color:selected ===  index ? tabBar.selectedColor: '#272727'}">
							{{ item.text }}
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: '',
				tabBar: {
					color: '#ffffff',
					selectedColor: '#0480FB',
					borderStyle: '#ccc',
					backgroundColor: 'transparent',
					position: 'top',
					list: [{
							pagePath: '/subPage1/socialized-service/policies-regulation/policy-regulation/index',
							iconPath: '/static/socialized-service/socialized-bottomtabar/zaixianketang.png',
							selectedIconPath: '/static/socialized-service/socialized-bottomtabar/zaixianketang-1.svg',
							text: '政策法规'
						},
						{
							pagePath: '/subPage1/socialized-service/policies-regulation/policy-interpret/index',
							iconPath: '/static/socialized-service/socialized-bottomtabar/zhenduanbaogao.svg',
							selectedIconPath: '/static/socialized-service/socialized-bottomtabar/zhenduanbaogao-1.svg',
							text: '政策解读'
						},
						{
							pagePath: '/subPage1/socialized-service/policies-regulation/policy-collect/index',
							iconPath: '/static/socialized-service/socialized-bottomtabar/yijianshouji.svg',
							selectedIconPath: '/static/socialized-service/socialized-bottomtabar/yijianshouji-1.svg',
							text: '意见收集'
						}
					]
				},
			}
		},
		mounted() {
			this.setselectindex()
		},
		methods: {
			// 获取获取当前处于那个页面，判断index
			setselectindex() {
				let routes = getCurrentPages()
				let curRoute = routes[routes.length - 1].route
				// console.log(curRoute)
				if (curRoute === 'subPage1/socialized-service/policies-regulation/policy-regulation/index') {
					this.selected = 0
				} else if (curRoute === 'subPage1/socialized-service/policies-regulation/policy-interpret/index') {
					this.selected = 1
				} else if (curRoute === 'subPage1/socialized-service/policies-regulation/policy-collect/index') {
					this.selected = 2
				}
			},
			// 点击底部导航栏触发方法
			setSelected(e, i) {
				if (this.selected !== i) {
					this.$store.commit({
						type: 'setTabbarIndex',
						tabindex: i,
					})
					let routes = getCurrentPages()
					uni.redirectTo({
						url: e.pagePath
					})


				}
				// 强制刷新组件状态
				// this.$forceUpdate();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tarbar-view {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 98;

		// padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */
		// padding-bottom: env(safe-area-inset-bottom);  /* 兼容 iOS >= 11.2 */
		.tarbar-list {
			width: 100%;
			max-height: 355rpx;
			min-height: 100rpx;
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
			color: #4f5153;

			.tarbar-list-ul {
				height: 136rpx;
				box-shadow: 0rpx -2rpx 6rpx 2rpx rgba(1, 32, 45, 0.08);
				width: 100%;
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				// padding-bottom: constant(safe-area-inset-bottom);
				// /* 兼容 iOS < 11.2 */
				// padding-bottom: env(safe-area-inset-bottom);
				/* 兼容 iOS >= 11.2 */
				justify-content: space-around;
				// border-top:  1px solid #ebedf0;

				.tarbar-list-li {
					width: 25%;
					height: 136rpx;
					text-align: center;
					display: flex;
					// flex-direction: column;
					// justify-content: center;
					align-items: center;
					justify-content: center;

					// .lineto{
					// 		float: left;
					// 		height: 100rpx;
					// 		width: 3rpx;
					// 		background-image: linear-gradient(to top,#4d586f,#ffffff,#4d586f);
					// 	}
					.new-bar-message {
						width: calc(100% - 2px);
						height: 136rpx;
						// background-color: #4CD964;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.tarbar-list-li-icon {
							width: 50rpx;
							// height: 60rpx;
							margin: 0 0 6rpx;

							// background-color: #00FFEE;
							image {
								height: 50rpx;
							}
						}

						.tarbar-list-li-name {
							// background-color: #00363D;
							width: 180rpx;
							text-align: center;
							line-height: 30rpx;
							font-size: 28rpx;
							font-weight: 500;
							height: 30rpx;
							letter-spacing: 1rpx;
						}
					}
				}
			}
		}
	}
</style>